<template>
  <form class="mui-input-group">
    <div class="mui-input-row">
      <label class="tit">收件人</label>
      <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
    </div>
    <div class="mui-input-row">
      <label class="tit">联系方式</label>
      <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
    </div>
    <div class="mui-input-row">
      <label class="tit">所在地区</label>
      <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
      <div class="divwrap">
<div class="mask" @click="choose" v-show="show"></div>
<v-distpicker
  v-show="show"
  type="mobile"
  @province="onChangeProvince"
  @city="onChangeCity"
  @area="onChangeArea"
  :province="newInfo.province"
  :city="newInfo.city"
  :area="newInfo.district"
>
</v-distpicker>
</div>

    </div>
    <div class="mui-input-row">
      <label class="tit">详细地址</label>
      <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
    </div>
    <div class="mui-button-row">
      <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
      <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
    </div>
  </form>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
  data () {
    return {
      form: {
        name: '',
        tel: '',
        area: '',
        detail: ''
        
      },
      show: false,     // 是否显示遮罩层
  newInfo: {
    province: '', // 省
    city: '',     // 市
    area: '',     // 区
  }

      
    }
  },
  props: ['id'],
created () {
this.getAddress()
},
methods: {
getAddress () {
  if (!this.id) {
    return
  }
  this.$indicator.open({
    text: '加载中'
  })
  var params = { id: this.id }
  this.$http.get('address/edit', { params: params }).then(res => {
    this.$indicator.close()
    if (res.data.code === 0) {
  this.$toast(res.data.msg)
} else if (res.data.code === 1) {
  this.form = res.data.data
} else if (res.data.code === 2) {
  this.$router.push({ name: 'login' })
}

  })
},

      save () {
this.$indicator.open({
  text: '提交中'
})
this.form.id = this.id
this.$http.post('address/save', this.form).then(res => {
this.$indicator.close()
if (res.data.code === 0) {
  this.$toast(res.data.msg)
} else if (res.data.code === 1) {
  this.$toast(res.data.msg)
  this.$router.go(-1)
} else if (res.data.code === 2) {
  this.$router.push({ name: 'login' })
}
})

},
    choose () {
  this.show = !this.show
},
onChangeProvince (data) {
  this.newInfo.province = data.value
},
onChangeCity (data) {
  this.newInfo.city = data.value
},
onChangeArea (data) {
  this.newInfo.area = data.value
  this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
  this.show = false
},
del () {
  this.$indicator.open({
    text: '删除中'
  })
  this.form.id = this.id
  this.$http.post('address/del', this.form).then(res => {
    this.$indicator.close()
    if (res.data.code === 0) {
  this.$toast(res.data.msg)
} else if (res.data.code === 1) {
  this.$toast(res.data.msg)
  this.$router.go(-1)
} else if (res.data.code === 2) {
  this.$router.push({ name: 'login' })
}

  })
}


  },
  components: {
  'v-distpicker': VDistpicker
},




}
</script>
<style lang="scss" scoped>
.mui-input-group .mui-button-row {
  height: auto;
}
.mui-input-clear {
  font-size: 14px;
}
.mui-input-group:before {
  list-style: none;
}
.mui-button-row {
  margin-top: 20px;
  button {
    margin: 20px 0;
    padding: 10px 0;
  }
}
.tit {
  color: #999;
}
input::-webkit-input-placeholder {
  color: #999;
}
input::-moz-placeholder {   /* Mozilla Firefox 19+ */
  color: #999;
}
input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
  color: #999;
}
input:-ms-input-placeholder {  /* Internet Explorer 10-11 */
  color: #999;
}
.divwrap > .mask {
background: #000;
opacity: 0.3;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.divwrap > .distpicker-address-wrapper {
color: #999;
background: #fff;
border-top: 1px solid #ccc;
z-index: 1;
height: 300px;
overflow-y: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

</style>


